前言

Hi 我是 Todd 是一個有四年多資歷的全端工程師工作上主要是使用 TypeScript、React 以及 node.js，最近我們團隊正式導入了 Svelte 5 做為開發新產品的框架，到目前為止的開發體驗極度舒適，就把這一陣子的學習心得分享出來，如果有餘裕或許可以分享為什麼會在新專案採用 Svelte 而不是 React。

我剛好是在 class component 的尾聲開始寫 React ，所以當我看到 hook 所帶來的進步讓我震驚不已，覺得這個框架變得好棒，沒有煩人的 this 、生命週期的管理變得更簡單以及 side effect 的 reuse 也可以輕易達成，但寫著寫著就開始覺得 React 生態系或者該說是 next.js 生態系愈來愈複雜，所以我開始對 Svetle 產生了點興趣。

大概是從 Svelte 3 開始接觸這個框架，那時就對於它的簡潔所吸引但也對它的黑魔法感到又愛又恨，雖然寫起來簡單但某些情況下的確沒有想到程式會是要那樣寫，像是 props 、 side effect 、 component event 等等，那時我還是只把它當作玩具只是寫點小程式來玩玩。直到去年發表了 Svelte 5 的 rune，看完更新的部分後我就大概可以確定能夠在工作上使用它了。

我覺得寫習慣 React 的人應該都蠻難接受 template syntax 的，但寫習慣後又覺得回不去了 XDD

在正式開始之前我想先說明一下，基本上我會省略 JS 的基本語法或者編輯器、node.js 等等前端開發時會用到基本概念及環境安裝，所以本系列文會比較適合寫過網頁前端或使用過 JS 開發過任何程式的人。

雖然沒寫過 React 也能看懂這個系列文，但在對比優缺點時可能會習慣使用 React 來比較 XD，所以可能會寫 React 的人會讀起來會有感一點。

Svelte 是什麼？

Svelte 是一個近幾年興起的前端框架，主要的核心概念是把大多數工作交給 compiler 以及沒有 virtual DOM ，也就代表著相比於 React 來說它的 runtime 是相當小也代表更小的 bundle size 意味著擁有更快的載入速度，而沒有 virtual DOM 這個特點在理論上效能會比使用 virtual DOM 的框架好一點點。

但隨著專案規模的增大，兩者的效能可能就沒什麼差距

那既然沒有 virtual DOM 它是如何達到 reactive 的更新呢？簡單來說 Svelte 的 compiler 會產生直接更新 DOM 的程式碼。

我們先來寫個簡單了小程式，雖然目前還沒有介紹任何 Svelte 的語法但我相信只要有寫過前端的讀者應該都能讀懂以下的程式碼。

<script>
	let count = $state(0);

	function increment() {
		count += 1;
	}
</script>

<button onclick={increment}>
	clicks: {count}
</button>

然後經過 Svelte compiler 會產生以下的 JS 程式碼，可以大概還是看得出來有點像以前 jQuery 時直接用 JS 操作 DOM 的感覺。

import * as $ from "svelte/internal/client";

function increment(_, count) {
	$.set(count, $.get(count) + 1);
}

var root = $.template(`<button> </button>`);

export default function App($$anchor) {
	let count = $.state(0);
	var button = root();

	button.__click = [increment, count];

	var text = $.child(button);

	$.reset(button);
	$.template_effect(() => $.set_text(text, `clicks: ${$.get(count) ?? ""}`));
	$.append($$anchor, button);
}

$.delegate(["click"]);

Svelte 5 與 Svelte 4 該如何選擇？

詳細的比較我們留到後面的文章需要時再補充，所以我先 「非常主觀且簡略」 地說，我認為 v5 雖然在 reactive 語法上稍微囉唆了一點點但讓 Svelte 變得十分強大且簡單，像是對於 array 及 object 的 update 或者 global state 的撰寫都比 v4 好很多很多，props 和 component event 的寫法更是友善許多。

而 Svelte 5 雖然還在 preview 階段但至少核心的語法已經相當穩定，相信正式 release 已經離我們不遠了，所以在這個當下要開始學習 Svelte 我會建議就直接從 v5 開始吧。

但剛好這陣子發生了 $state.link 這個 rune 推出後沒幾天又馬上刪除的事件 XD

本系列文預計包含範圍

1. Svelte 5

2. SvelteKit 2 (可以想成類似 next.js 的東西)

3. Svelte 生態系中常用的 library

4. 部署 SvelteKit